<template>
    <transition name="slider">
        <div class="modify-password">
            <m-header :canreturn=true :titleText="titleText"></m-header>
            <div class="content">
                <div class="mine-box">
                    <p>原登录密码</p>
                    <input type="password" placeholder="请输入原登录密码" class="inputbox" ref="ori" @keyup="check1">
                    <p class="error ori" style="display:none" ref="oritips"></p>
                    <p>新密码</p>
                    <input type="password" placeholder="请输入新密码" class="inputbox" ref="newpossword" @keyup="check2">
                    <p class="error new" style="display:none" ref="newtips"></p>
                    <p>重复新密码</p>
                    <input type="password" placeholder="请重复输入新密码" class="inputbox" @keyup="checkPassword" ref="confirmpassword">
                    <p class="error confirm" style="display:none" ref="confirm"></p>
                    <button class="btn" @click="changePassword">确认修改</button>
                </div>
            </div>
            <mask-common :showMask="showMask" :maskInfo="maskInfo" @mask="hideMask"></mask-common>
            <div class="tips" v-show="tipsMessage">
                {{tipsContent}}
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from '@/components/m-header/m-header';
import MaskCommon from '@/base/maskcommon/maskcommon';
import { postInfo } from '@/base/api/indexpage/getindexinfo';
import { mapGetters, mapMutations } from 'vuex';
import { setLocalStorage } from 'common/js/storage';

export default {
    data() {
        return {
            titleText: '修改登录密码',
            showMask: false,
            tipsMessage: false,
            tipsContent: '',
            maskInfo: {
                content: '',
                btn: [],
            },
        };
    },
    methods: {
        check1() {
            this.$refs.oritips.style.display = 'none';
            this.$refs.oritips.innerHTML = '';
        },
        check2() {
            this.$refs.newtips.style.display = 'none';
            this.$refs.newtips.innerHTML = '';
        },
        checkPassword() {
            let val1 = this.$refs.newpossword.value;
            let val2 = this.$refs.confirmpassword.value;
            if (val2 === '') {
                this.$refs.confirm.style.display = 'block';
                this.$refs.confirm.innerHTML = '密码不能为空';
                return;
            }
            if (val1 === val2) {
                this.$refs.confirm.style.display = 'none';
            } else {
                this.$refs.confirm.style.display = 'block';
                this.$refs.confirm.innerHTML = '两次输入密码不一致';
            }
        },
        changePassword() {
            const address = '/user/edit-password';
            let val1 = this.$refs.newpossword.value;
            let val2 = this.$refs.confirmpassword.value;
            let val3 = this.$refs.ori.value;
            if (val3 === '') {
                this.$refs.oritips.style.display = 'block';
                this.$refs.oritips.innerHTML = '原始密码不能为空';
                return;
            }
            if (val1 === '') {
                this.$refs.newtips.style.display = 'block';
                this.$refs.newtips.innerHTML = '新密码不能为空';
                return;
            }
            if (val1 === val2) {
                console.log(this.getToken);
                postInfo(address, {
                    token: this.getToken,
                    old_password: val3,
                    password: val1,
                    password1: val2,
                }).then((res) => {
                    console.log(res);
                    if (res.status_code === 200) {
                        this.showMask = true;
                        this.maskInfo.content = res.message;
                        this.settoken('');
                        this.userLogout();
                        setLocalStorage('token', '');
                        setTimeout(() => {
                            this.$router.push('/mine');
                            this.showMask = false;
                        }, 1000);
                    } else {
                        this.showTips(res.message);
                    }
                });
            }
        },
        showTips(content) {
            plus.nativeUI.toast(content);
        },
        hideMask() {
            this.showMask = true;
        },
        ...mapMutations([
            'userLogout',
            'settoken',
        ]),
    },
    computed: {
        ...mapGetters(['getToken']),
    },
    components: {
        MHeader,
        MaskCommon,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.modify-password {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: #ffffff;

    .content {
        margin-top: 5px;

        .mine-box {
            padding: 0 15px;
            width: 100%;
            box-sizing: border-box;

            p {
                font-size: 16px;
                color: #222222;
                line-height: 45px;
            }

            input {
                display: block;
                height: 40px;
                width: 100%;
                border: 1px solid #cccccc;
                border-radius: 5px;
                text-indent: 10px;
                outline: none;
                font-size: 12px;
                font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
            }

            .error {
                color: red;
                font-size: 12px;
                line-height: 12px;
                margin-top: 2px;
            }

            .btn {
                width: 100%;
                height: 40px;
                background: #ffc400;
                outline: none;
                border: none;
                border-radius: 20px;
                margin-top: 30px;
                text-align: center;
                line-height: 40px;
                font-size: 16px;
                color: #ffffff;
                position: relative;
                font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
            }
        }
    }
}
</style>

